@import "../../../design/_common/style/web/_variables.less";

.@{prefix}-input-number {
  &.cw-style-background-color {
    .@{prefix}-input {
      background-color: var(--cw-style-background-color, var(--el-input-bg-color-default));
    }
  }

  &.cw-style-color {
    .@{prefix}-input, .@{prefix}-input__inner {
      color: var(--cw-style-color, var(--el-input-text-color-default));
    }
  }

  &.cw-style-font-size {
    .@{prefix}-input {
      font-size: var(--cw-style-font-size);
    }
  }

  &.cw-style-font-style {
    .@{prefix}-input {
      font-style: var(--cw-style-font-style);
    }
  }
}

.@{prefix}-input-number.@{prefix}-is-controls-right {
  border: none !important;

  &.cw-style-border-color {
    .@{prefix}-input {
      border-color: var(--cw-style-border-color, var(--el-input-border-color-default));
    }
  }

  &.cw-style-border-style {
    .@{prefix}-input {
      border-style: var(--cw-style-border-style, solid);
    }
  }

  &.cw-style-border-width {
    .@{prefix}-input {
      border-top-width: var(--cw-style-border-top-width, 1px);
      border-right-width: var(--cw-style-border-right-width, 1px);
      border-bottom-width: var(--cw-style-border-bottom-width, 1px);
      border-left-width: var(--cw-style-border-left-width, 1px);
    }
  }

  &.cw-style-border-radius {
    .@{prefix}-input {
      border-top-left-radius: var(--cw-style-border-top-left-radius, var(--el-input-border-radius));
      border-top-right-radius: var(--cw-style-border-top-right-radius, var(--el-input-border-radius));
      border-bottom-left-radius: var(--cw-style-border-bottom-left-radius, var(--el-input-border-radius));
      border-bottom-right-radius: var(--cw-style-border-bottom-right-radius, var(--el-input-border-radius));
    }
  }

  &.cw-style-background-color {
    .@{prefix}-input {
      background-color: var(--cw-style-background-color, var(--el-input-bg-color-default));
    }
  }

  &.cw-style-color {
    .@{prefix}-input, .@{prefix}-input__inner {
      color: var(--cw-style-color, var(--el-input-text-color-default));
    }
  }

  &.cw-style-font-size {
    .@{prefix}-input {
      font-size: var(--cw-style-font-size);
    }
  }

  &.cw-style-font-style {
    .@{prefix}-input {
      font-style: var(--cw-style-font-style);
    }
  }
}
